<!-- 学生画像 -->
<script setup>
import { useClasStore } from '@/stores/index'
import { ref } from 'vue'
import * as echarts from 'echarts'
import { onMounted } from 'vue'

const classStore = useClasStore()
const tablist = ref([])
tablist.value = classStore.stuList

const stu = () => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      data: ['Java', 'Linux', 'MySql', '达梦', 'SpringBoot', 'Web']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [90, 75, 95, 100, 80, 100],
        name: '成绩',
        type: 'line'
      }
    ]
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  stu()
})
</script>

<template>
  <div class="stu-portrait">
    <div class="stu-table">
      <el-table :data="tablist">
        <el-table-column prop="name" label="Name" width="180" />
      </el-table>
    </div>
    <div class="right">
      <div id="main"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.stu-portrait {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .stu-table {
    width: 200px;
    height: 80vh;
  }
  #main {
    height: 500px;
    width: 80vw;
  }
}
</style>
